<template>
  <div class="article-comment-item" v-if="!comment.parent_id">
    <van-row
      type="flex"
      align="center"
      justify="space-between"
      style="width: 100%"
    >
      <van-col span="3">
        <van-image
          width="40"
          height="40"
          round
          :src="comment.user.decorate_avatar"
          @click="goAuther(article.author_id)"
        />
      </van-col>
      <van-col span="17" style="padding: 0 5px">
        <div
          style="font-size: 14px; color: #666"
          @click="goAuther(article.author_id)"
        >
          {{ comment.user.username }}
        </div>
        <div style="font-size: 12px; color: #666">
          {{ comment.create_time | dateFormat }}
        </div>
        <div class="item-content">{{ comment.content }}</div>
      </van-col>
      <van-col span="4">
        <div class="like-num">
          <van-icon name="chat" color="#666" size="16" @click="showPopup" />
          <span>{{ comment.replies_count }}</span>
        </div>
        <div class="like-num">
          <van-icon
            name="good-job"
            size="16"
            v-if="comment.like_users.includes(tokenInfo.user_id)"
            color="red"
            @click="dislikeComment(comment)"
          />
          <van-icon
            name="good-job"
            color="#666"
            size="16"
            v-else
            @click="likeComment(comment)"
          />
          <span>{{ comment.like_users.length }}</span>
        </div>
      </van-col>
    </van-row>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '50%' }"
      round
    >
      <div>
        <h4 class="article-comment-header">
          回复
          <div class="add-btn">
            <van-icon
              name="add"
              color="#999"
              class="add-btn"
              @click="showBox"
            />
          </div>
        </h4>
      </div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell-group inset>
          <van-cell
            v-for="item in replies"
            :key="item.id"
            :label="item.content"
            label-class="reply-content"
          >
            <template #title>
              <van-row type="flex" align="center">
                <van-col>
                  <van-image
                    width="35px"
                    height="35px"
                    fit="cover"
                    round
                    :src="item.user.decorate_avatar"
                    @click="goAuther(article.author_id)"
                  />
                </van-col>
                <van-col class="reply-name" @click="goAuther(article.author_id)"
                  >{{ item.user.username }}：</van-col
                >
              </van-row>
            </template>
            <template #right-icon>
              <div class="reply-like-box">
                <van-icon
                  name="good-job"
                  size="16"
                  v-if="item.like_users.includes(tokenInfo.user_id)"
                  color="red"
                  @click="dislikeComment(item)"
                />
                <van-icon
                  name="good-job"
                  color="#666"
                  size="16"
                  v-else
                  @click="likeComment(item)"
                />
                <span class="reply-like">{{ item.like_users.length }}</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </van-list>

      <div class="cmt-box van-hairline--top" v-if="showReply">
        <div class="left">
          <textarea
            placeholder="友善评论、理性发言、阳光心灵"
            @blur="hideBox"
            ref="iptCmt"
            v-model.trim="cmt"
          ></textarea>
        </div>
        <van-button type="default" @click="pubCmt">发布</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  replyListAPI,
  pubCommentAPI,
  likeCommentAPI,
  dislikeCommentAPI,
} from "@/api/articleApi";
import { mapActions, mapState } from "vuex";
export default {
  props: ["comment"],
  data() {
    return {
      show: false,
      showReply: false,
      replies: [],
      loading: false,
      finished: false,
      page: 1,
      cmt: "",
    };
  },
  computed: {
    ...mapState("user", ["tokenInfo"]),
    ...mapState("article", ["article"]),
  },
  methods: {
    ...mapActions("article", ["initArticle"]),
    showPopup() {
      this.show = true;
    },
    showBox() {
      this.showReply = true;
      this.$nextTick(() => {
        // 2. 通过 ref 获取到 textarea 的引用
        this.$refs.iptCmt.focus();
      });
    },
    hideBox(e) {
      setTimeout(() => {
        this.showReply = false;
        // 清空用户输入的评论内容
        this.cmt = "";
      }, 100);
    },
    async onLoad() {
      const { data: res } = await replyListAPI(this.comment.id, this.page);
      this.replies = [...this.replies, ...res.results];
      this.page++;
      // 加载状态结束
      this.loading = false;
      // 数据全部加载完成
      if (!res.next) {
        this.finished = true;
      }
    },
    async pubCmt() {
      const comment = {
        user_id: this.tokenInfo.user_id,
        content: this.cmt,
        article_id: this.$route.params.id,
        parent_id: this.comment.id,
      };
      const { data: res } = await pubCommentAPI(comment);
      if (res.message) {
        this.$notify({
          type: "warning",
          message: "评论失败",
          duration: 2000,
        });
        return;
      }
      this.replies.unshift(res);
      this.initArticle(this.article.id);
      this.comment.replies_count++;
    },
    async likeComment(target) {
      const { data: res } = await likeCommentAPI(target.id);
      if (res.message == "OK") {
        target.like_users.push(this.tokenInfo.user_id);
        this.$notify({
          type: "success",
          message: "点赞成功",
          duration: 2000,
        });
      }
    },
    async dislikeComment(target) {
      const { data: res } = await dislikeCommentAPI(target.id);
      if (res.message == "OK") {
        const index = target.like_users.findIndex(
          (item) => item == this.tokenInfo.user_id
        );
        target.like_users.splice(index, 1);
        this.$notify({
          type: "success",
          message: "取消点赞成功",
          duration: 2000,
        });
      }
    },
    goAuther(id) {
      this.$router.push(`/users/${id}`);
    },
  },
};
</script>

<style lang="less" scoped>
.article-comment-item {
  padding: 10px 10px;
  padding-right: 0px;
  border-bottom: 1px solid #f1f1f1;
}
.item-content {
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.article-comment-header {
  font-size: 20px;
  margin: 5px 0;
  text-align: center;
}
.reply-content {
  text-indent: 28px;
}
.reply-name {
  margin-left: 10px;
}
.like-num {
  font-size: 12px;
  color: #666;
}
.like-num span {
  display: inline-block;
  vertical-align: 20%;
  padding-left: 3px;
}
.reply-like-box {
  display: flex;
  align-items: center;
}

.add-btn {
  position: absolute;
  right: 10px;
  top: 5px;
}

.art-cmt-container-2 {
  padding-bottom: 80px;
}

.cmt-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding-left: 10px;
  box-sizing: border-box;
  background-color: white;
  z-index: 99;
  .left {
    height: 70%;
    flex: 1;
    textarea {
      width: 90%;
      display: block;
      height: 70%;
      border: 1px solid #efefef;
      background-color: #f8f8f8;
      resize: none;
      border-radius: 6px;
      padding: 5px;
    }
  }
  .van-button {
    height: 50%;
    margin-right: 10px;
    border: none;
    background-color: #3a88f9;
    color: #fff;
  }
}
</style>
